import NavBar from '@/components/NavBar'
import { DatePicker, List, Drawer } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'
import { getUserProfile, editUserName } from '@/store/action/profile'
import classNames from 'classnames'
import { profile } from '@/store/reducer/profile'
import { EditInput } from './components/EditInput'

const ProfileEdit = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getUserProfile())
  }, [dispatch])
  const userProfile = useSelector((state) => state.profile.userProfile)
  const [open, setOpen] = useState({ visible: false, type: '' })
  const onClose = () => {
    setOpen({ visible: false, type: '' })
  }
  const editName = (type, value) => {
    // console.log(type, value)
    dispatch(editUserName({ [type]: value }))
    onClose()
  }
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 顶部导航栏 */}
        <NavBar onLeftClick={() => history.go(-1)}>个人信息</NavBar>

        <div className="wrapper">
          {/* 列表一：显示头像、昵称、简介 */}
          <List className="profile-list">
            <List.Item
              arrow="horizontal"
              extra={
                <span className="avatar-wrapper">
                  <img src={userProfile.photo} alt="" />
                </span>
              }
            >
              头像
            </List.Item>

            <List.Item
              arrow="horizontal"
              extra={userProfile.name}
              onClick={() => setOpen({ visible: true, type: 'name' })}
            >
              昵称
            </List.Item>

            <List.Item
              arrow="horizontal"
              extra={
                <span
                  className={classNames(
                    'intro',
                    userProfile.intro ? 'normal' : ''
                  )}
                >
                  {userProfile.intro || '未填写'}
                </span>
              }
              onClick={() => setOpen({ visible: true, type: 'intro' })}
            >
              简介
            </List.Item>
          </List>

          {/* 列表二：显示性别、生日 */}
          <List className="profile-list">
            <List.Item
              arrow="horizontal"
              extra={profile.gender === 0 ? '男' : '女'}
            >
              性别
            </List.Item>
            <DatePicker
              mode="date"
              title="选择年月日"
              value={new Date(userProfile.birthday)}
              minDate={new Date(1900, 1, 1, 0, 0, 0)}
              maxDate={new Date()}
              onChange={() => {}}
            >
              <List.Item arrow="horizontal" extra={userProfile.birthday}>
                生日
              </List.Item>
            </DatePicker>
          </List>

          {/* 文件选择框，用于头像图片的上传 */}
          <input type="file" hidden />
        </div>

        {/* 底部栏：退出登录按钮 */}
        <div className="logout">
          <button className="btn">退出登录</button>
        </div>
      </div>
      {/* 全屏表单抽屉 */}
      <Drawer
        position="right"
        className="drawer"
        style={{ minHeight: document.documentElement.clientHeight }}
        children={''}
        sidebar={
          open.visible && (
            <EditInput
              onClose={onClose}
              type={open.type}
              editName={editName}
            ></EditInput>
          )
        }
        open={open.visible}
      />
    </div>
  )
}

export default ProfileEdit
